<template>
<div>
     <el-form :model="ruleForm"  :label-width="$store.state.settings.mode == 'pc' ? '150px' : ''" ref="ruleForm">

                <el-form-item label='taskId' prop="taskId" v-if="false">
                <el-input v-model="ruleForm.taskId"></el-input>
                </el-form-item>
                
                <el-form-item label="净高设计值"  prop="h_d" 
                 :rules="{
                    required: true, message: '内容不能为空', trigger: 'blur'
                  }" >
                <el-input v-model="ruleForm.h_d" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="净开间设计值"  prop="bay_d" 
                  :rules="{
                    required: true, message: '内容不能为空', trigger: 'blur'
                  }">
                <el-input v-model="ruleForm.bay_d" autocomplete="off"></el-input>
                </el-form-item>
                
                <el-form-item label="净进深设计值"  prop="depth_d" 
                :rules="{
                    required: true, message: '内容不能为空', trigger: 'blur'
                  }">
                <el-input v-model="ruleForm.depth_d" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item
                v-for="(door, index) in ruleForm.doors"
                :label="'门设计值' + (index+1)"
                :key="door.key"
                :rules="{
                  required: true, message: '内容不能为空', trigger: 'blur'
                }"
                >
                 <el-col :span="10">
                  <el-input v-model="door.value1" placeholder="高度"></el-input>
                 </el-col>
                  <el-col :span="10">
                  <el-input v-model="door.value2" placeholder="宽度"></el-input>
                  </el-col>
                   <el-col :span="2">
                  <el-button @click.prevent="removeDoor(door)" >删除</el-button>
                   </el-col>
                </el-form-item>

                <el-form-item
                  v-for="(window, index) in ruleForm.windows"
                  :label="'窗设计值' + (index+1)"
                  :key="window.key"
                  :inline="true"
                  :rules="{
                    required: true, message: '内容不能为空', trigger: 'blur'
                  }"
                >
                <el-col :span="10">
                <el-input v-model="window.value1" placeholder="高度"></el-input>
                </el-col>
                <el-col :span="10">
                <el-input v-model="window.value2" placeholder="宽度"></el-input>
                </el-col>
                  <el-col :span="2">
                <el-button @click.prevent="removeWindow(window)" >删除</el-button>
                  </el-col>
                </el-form-item>

                <el-form-item > 
                <el-button type="primary" @click="submitForm('ruleForm')">立即传入</el-button>
                 <el-button @click="addWindow">新增窗</el-button>
                 <el-button @click="addDoor">新增门</el-button>
                 
                </el-form-item>
                
    </el-form>     
</div>
</template>
<script>
import msApi from "@/api/msApi";

export default {
    name: 'FormDesign',
     props: {
        taskId: {type: String,default: ''}, 
      
     },
    data() {
        return {
              ruleForm: {
              windows: [{
                value1: '',
                value2:''
              }],
              doors: [{
                value1: '',
                value2:''
              }],
              h_d: '',
              bay_d:'',
              depth_d:'',
              taskId: ''
            },
        }
    },
    mounted() {
        this.ruleForm.taskId = this.taskId
    },
    methods: {
      loadTaskId(){
      },
      removeWindow(item) {
      var index = this.ruleForm.windows.indexOf(item)
      if (index !== -1) {
        this.ruleForm.windows.splice(index, 1)
      }
      },

      addWindow() {
        this.ruleForm.windows.push({
          value: '',
          key: Date.now()
        });
      },

       removeDoor(item) {
      var index = this.ruleForm.doors.indexOf(item)
      if (index !== -1) {
        this.ruleForm.doors.splice(index, 1)
      }
      },

      addDoor() {
        this.ruleForm.doors.push({
          value: '',
          key: Date.now()
        });
      },

       resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      async submitForm(formName) {
        console.log(this.ruleForm)
        // alert(2)
     }

    }
      
}
</script>
